<template>
    <div style="flex: 1;background-color: #ffffff">
        <div class="top-area">
            <div class="top-body">
                <image class="top-photo" src="root:img/user_info_photo.png"></image>
                <text class="user-name">{{infoData.userName}}</text>
            </div>
        </div>
        <div class="tab-area">
            <div @click="change(0)" :class="['tab-li', index == 0 ? 'active':'']">
                <text :class="['tab-t',index == 0 ? 'active-text':'']">工作</text>
            </div>
            <div @click="change(1)" :class="['tab-li', index == 1 ? 'active':'']">
                <text :class="['tab-t',index == 1 ? 'active-text':'']">动态</text>
            </div>
        </div>


        <host style="flex: 1" @change="onchange" :page="index">
            <div @load="load"  class="tab-content">

                <wxc-cell :has-arrow="true"
                          :has-top-border="true"
                          @wxcCellClicked="jumpUserInfo"
                          :auto-accessible="false">
                    <image class="image"
                           slot="label" style="width: 48px;height: 48px;"
                           src="root:img/user_info.png"></image>
                    <text class="user-info" slot="title">个人信息</text>
                </wxc-cell>
                <wxc-cell :has-arrow="true"
                          :has-top-border="true"
                          @wxcCellClicked="jumpSystemSet"
                          :auto-accessible="false">
                    <image class="image"
                           slot="label" style="width: 48px;height: 48px;"
                           src="root:img/setup.png"></image>
                    <text class="user-info" slot="title">系统设置</text>
                </wxc-cell>

                <wxc-button type="green" text="退出账户" :btnStyle="btnStyle"
                            @wxcButtonClicked="loginOut"></wxc-button>

                <!--<speech-list style="height: 100px;border-width: 1px;border-color: #00B4FF;"></speech-list>-->
                <head-bar></head-bar>

            </div>
            <div class="tab-content">
                <list class="list">
                    <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
                             :display="refreshing ? 'show' : 'hide'">
                        <loading-indicator style="width: 50px;height: 50px;color: #00c26e;"
                                           class="indicator"></loading-indicator>
                    </refresh>
                    <cell class="cell" v-for="(ele,dindex) in dataList">
                        <div class="content speech-content" @click="jumpSpeechDetail" :data-id="ele.id">
                            <div class="item-head">
                                <image class="photo" src="root:img/my_photo.png"></image>
                                <div class="item-user-info">
                                    <div class="item-user-name">
                                        <text style="font-size: 28px;font-weight: 800;margin-right: 20px;color:#5f5f5f;">{{ele.sourceUser}}</text>
                                        <text style="font-size: 28px;color:#999999;">{{ele.sectionName}}</text>
                                    </div>
                                    <div>
                                        <text style="font-size: 24px;color:#999999;">{{formatTime(ele.createTime)}}
                                        </text>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content" @click="jumpSpeechDetail" :data-id="ele.id">

                                <text class="item-content-t">{{ textContent(ele.contentText)}}</text>

                                <div v-if="ele.contentType == '1300'" class="img-row" v-for="(fimg,findex) in imgTypesettingList(ele.contentFileKey)">
                                    <image class="img-ele"
                                           v-for="(ele,eleIndex) in fimg"
                                           :src="ele.thumb"
                                           @click="openWxcLightboxOverlayClicked(findex*3+eleIndex,ele.contentFileKey)"
                                           placeholder="root:img/default_yx.png"></image>
                                </div>


                                <audio-vue v-if="ele.contentType == '1100'" :time="ele.voiceTime"
                                           :audioSrc="vedioUrl(ele.contentFileKey)"></audio-vue>
                            </div>
                            <div class="item-footer">
                                <div class="item-footer-area item-footer-left">
                                    <image class="item-footer-i" src="root:img/read_icon.png"></image>
                                    <text class="item-footer-t">阅读({{ele.lookNum ? ele.lookNum:0}})</text>
                                </div>
                                <div class="item-footer-area item-footer-middle" @click="showCommentsClicked(dindex,ele.id)">
                                    <image class="item-footer-i" src="root:img/conment_icon.png"></image>
                                    <text class="item-footer-t">评论({{ele.commentNum}})</text>
                                </div>
                                <div class="item-footer-area item-footer-right" @click="addLike(dindex,ele.id,ele.isLike)">
                                    <image class="item-footer-i" :src="ele.isLike ? 'root:img/liked_icon.png':'root:img/like_icon.png'"></image>
                                    <text :class="['item-footer-t',ele.isLike && 'liked']">赞({{ele.likeNum}})</text>
                                </div>
                            </div>
                        </div>
                    </cell>

                    <cell v-if="dataList.length == 0">
                        <div class="no-result"><text class="no-result-t">暂无数据!</text></div>
                    </cell>

                    <loading class="loading" @loading="loadDataMore" :display="loadinging ? 'show' : 'hide'">
                        <loading-indicator class="loading-indicator"></loading-indicator>
                    </loading>
                </list>
            </div>
        </host>

        <send-message
                :params="commentsParams"
                :show="commentsShow"
                name="content"
                @closeLayerClicked="closeCommentsLayerClicked"
                :success="commentsSuccess"
                url="/app/yxq/speech/comments/add"></send-message>
    </div>

</template>

<style>


    .liked {
        color: #01A65A;
    }

    .no-result{
        padding-top: 200px;
        justify-content: center;
        align-items: center;
    }

    .no-result-t{
        font-size: 30px;
    }

    .user-name {
        margin-top: 30px;
        color: white;
        font-size: 32px;
    }
    .tab-t{
        font-size:30px;
    }

    /*顶部区域*/
    .top-area {
        height: 300px;
        width: 750px;
        background-color: #01A65A;
        flex-direction: column;
        padding-top: 100px;
    }

    /*返回导航条*/
    .top-return {
        height: 80px;
        width: 750px;
    }

    /*顶部主体*/
    .top-body {
        height: 200px;
        width: 750px;
        align-items: center;
        justify-content: center;
    }

    /*顶部头像*/
    .top-photo {
        background-color: #eeeeee;
        width: 100px;
        height: 100px;
        border-radius: 20px;
    }

    /*切换栏区域*/
    .tab-area {
        align-items: center;
        justify-content: center;
        height: 80px;
        width: 750px;
        background-color: white;
        flex-direction: row;
    }

    /*切换条*/
    .tab-li {
        flex: 1;
        align-items: center;
        justify-content: center;
        height: 80px;
        border-bottom-width: 1px;
        border-bottom-color: #9c9c9c;
    }

    /*活动栏*/
    .active {
        border-bottom-width: 2px;
        border-bottom-color: #01A65A;
    }

    /*当前活动字体*/
    .active-text {
        color: #01A65A;
    }

    /*标签栏目内容*/
    .tab-content {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #f0f0f0;
    }

    /*个人信息*/
    .user-info {
        width: 200px;
        margin-left:20px;
        font-size: 30px;
    }



    .refresh {
        align-items: center;
        justify-content: center;
    }

    .speech-img {
        width: 230px;
        height: 230px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        border-width: 1px;
        border-color: #e9e9e9;
    }

    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .loading-indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .loading-indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }

    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .item-s-t {
        font-size: 24px;
        color: #999999;
        margin-right: 20px;
    }

    .article-item-content {
        flex-direction: row;
        padding-top: 32px;

    }

    .article-item-content-img {
        margin-bottom: 32px;
        width: 200px;
    }

    .article-item-content-title {
        flex-direction: column-reverse;
        width: 520px;
        padding-right: 20px;
        height: 268px;
    }

    .item-footer-i {
        width: 34px;
        height: 23px;
        margin-right: 5px;
    }

    .item-footer-t {
        font-size: 25px;
        color: #272727;
    }

    .item-footer-area {
        width: 240px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .item-footer {
        height: 78px;
        flex-direction: row;
        border-top-width: 1px;
        border-top-color: #f0f0f0;
        margin-top: 20px;
    }

    .item-content-t {
        font-size: 32px;
        color: #272727;
    }

    .item-content {
        padding-top: 20px;
    }

    .item-user-info {
        flex-direction: column-reverse;
        margin-left: 10px;
    }

    .item-user-name {
        font-size: 30px;
        margin-bottom: 15px;
        font-weight: bold;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .photo {
        height: 80px;
        width: 88px;
        border-radius: 100px;
        margin-left: 10px;

        border-width: 1px;
        border-color: #717171;
    }

    .item-head {
        flex-direction: row;
        margin-top: 32px;
    }

    .item-container {
        width: 750px;
        background-color: #f2f3f4;
    }

    .border-cell {
        background-color: #f2f3f4;
        width: 750px;
        height: 100px;
        align-items: center;
        justify-content: center;
        border-bottom-width: 1px;
        border-style: solid;
        border-color: #e0e0e0;
    }

    .cell {
        background-color: #ffffff;
    }

    .content {
        width: 750px;
        border-bottom-width: 10px;
        border-bottom-color: #F6F6F6;
        /*align-items: center;*/
        /*justify-content: center;*/
        padding-left: 15px;
        padding-right: 15px;
    }


</style>

<style scoped>

    .img-ele{
        width: 200px;
        height: 200px;
        margin-left: 15px;
        margin-right: 15px;
    }
    .img-row{
        flex-direction: row;
        margin-bottom: 15px;
        margin-top: 15px;
    }
    .img-panel{
        flex-direction: column;
    }

    .follow-img {
        width: 200px;
        height: 200px;
        margin-bottom: 10px;
    }
    .follow-content-img {
        margin-top: 24px;
    }
    .speech-img {
        width: 230px;
        height: 230px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        border-width: 1px;
        border-color: #e9e9e9;
    }

    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .loading-indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .loading-indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }

    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .item-s-t {
        font-size: 24px;
        color: #999999;
        margin-right: 20px;
    }

    .article-item-content {
        flex-direction: row;
        padding-top: 32px;

    }

    .article-item-content-img {
        margin-bottom: 32px;
        width: 200px;
    }

    .article-item-content-title {
        flex-direction: column-reverse;
        width: 520px;
        padding-right: 20px;
        height: 268px;
    }

    .item-footer-i {
        width: 34px;
        height: 23px;
        margin-right: 5px;
    }

    .item-footer-t {
        font-size: 25px;
        color: #272727;
    }

    .item-footer-area {
        width: 240px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .item-footer {
        height: 78px;
        flex-direction: row;
        border-top-width: 1px;
        border-top-color: #f0f0f0;
        margin-top: 20px;
    }

    .item-content-t {
        font-size: 32px;
        color: #272727;
    }

    .item-content {
        padding-top: 20px;
    }

    .item-user-info {
        flex-direction: column-reverse;
        margin-left: 10px;
    }


    .photo {
        height: 80px;
        width: 88px;
        border-radius: 100px;
        margin-left: 10px;

        border-width: 1px;
        border-color: #717171;
    }

    .item-head {
        flex-direction: row;
        margin-top: 32px;
    }

    .item-container {
        width: 750px;
        background-color: #f2f3f4;
    }

    .border-cell {
        background-color: #f2f3f4;
        width: 750px;
        height: 100px;
        align-items: center;
        justify-content: center;
        border-bottom-width: 1px;
        border-style: solid;
        border-color: #e0e0e0;
    }

    .cell {
        background-color: #ffffff;
    }

    .content {
        width: 750px;
        border-bottom-width: 10px;
        border-bottom-color: #F6F6F6;
        /*align-items: center;*/
        /*justify-content: center;*/
        padding-left: 15px;
        padding-right: 15px;
    }


</style>

<script>
    import {WxcCell, WxcButton,WxcLightbox} from 'weex-ui'
    import {speechList} from '../components/speechList.vue'
    import {headBar} from '../components/headBar.vue'
    import nw from '../network/nw.js'
    import dtl from '../utils/dateUtils.js'
    import ynav from '../network/nav.js'
    import sendMessage from '../businessComponents/sendMessage.vue'



    var nav = weex.requireModule("navigator")
    var pref = weex.requireModule("pref")

    import utils from '../utils/utils.js'

    export default {
        components: {WxcCell, WxcButton,speechList,headBar,WxcLightbox,sendMessage},
        data() {
            return {
                logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
                target: 'World',
                index: 0,
                btnStyle: {//退出按钮的样式
                    'margin-top': 100,
                    'margin-left': 20,
                    'height': 70,
                    'border-radius': 5,
                    'background-color': '#01A65A',
                },
                dataList: [],
                from:1,//加载第几页数据
                refreshing: false,//是否重新加载
                loadinging: false,//是否加载更多
                infoData:{},
                slideImage:[],
                slideIndex:0,
                slideShow:false,
                commentsShow:false,//是否显示发表评论
                commentsParams:{},//发表评论请求参数
                currentCommentsIndex:-1
            }
        },
        methods: {
            //点赞
            addLike(index,id,isLike) {
                var param = {}
                param.speechId = id
                var url = '/app/yxq/speech/like'
                var self = this
                nw.postDefine(url, {
                    data: param,
                    success(res) {
                        var ele = self.dataList[index]
                        Vue.set(ele, 'isLike', isLike ? 0 : 1)
                        Vue.set(ele, 'likeNum', !isLike ? ele.likeNum + 1 : ele.likeNum == 0 ? 0:ele.likeNum - 1)
                    }
                })
            },

            //关闭发表评论
            closeCommentsLayerClicked(show){
                this.commentsShow = false
            },

            //显发表评论弹出框
            showCommentsClicked(index,speechId){
                this.currentCommentsIndex = index
                this.commentsParams = {speechId:speechId}
                this.commentsShow = true
            },
            //成功发表评论回调函数
            commentsSuccess(res){
                var modal = weex.requireModule('modal')
                var ele = this.dataList[this.currentCommentsIndex]
                Vue.set(this.dataList[this.currentCommentsIndex],'commentNum',ele.commentNum == 0 ? 1:ele.commentNum+1)
                this.commentsShow = false
                modal.toast({message:'评论成功'})
            },

            //获取图片集合
            imgList(url) {
                if (!url) {
                    return []
                }

                var list = url.split(';')

                var arr = new Array()
                for (let i = 0; i < list.length; i++) {
                    var url =
                        arr.push({
                            url:list[i].split(',')[1],
                            thumb:list[i].split(',')[2],
                        })
                }
                return arr
            },

            onchange(p) {
//                this.toast(p.index)
            },

            //切换工作或动态
            change(i) {
                this.index = i
            },

            //获取图片瀑布流高度
            autoFollowHeightStyle: function (urls) {
                if (urls === '') {
                    return {height: 0}
                }

                var arr = this.imgList(urls)
                if(arr.length > 0 ) {
                    var index = parseInt(arr.length / 4)

                    var remain = arr.length % 4

                    if (remain > 0) {
                        index += 1
                    }

                    return {height: index * 220}
                }else{
                    return {height: 0}

                }
            },
            //开启幻灯片
            openWxcLightboxOverlayClicked(findex,url) {


                var arr = this.imgList(url)

                let imgArr = []
                for(let k in arr){
                    var imgs = arr[k]
                    //imgArr.push({src: imgs.url})
                    imgArr.push(imgs.url)
                }
                this.slideImage = imgArr
                this.slideIndex = findex
                var self = this
                /*  setTimeout(() => {
                      self.slideShow = true
                  }, 500)*/
                var zm=weex.requireModule('zoomImage')
                let p={}
                p.index=findex
                p.list=imgArr
                zm.show(p)

            },

            //跳转到用户信息页面
            jumpUserInfo(event){
                ynav.push('root:com/yx/user/userInfoDetail.js')
            },
            //跳转到用户信息页面
            jumpSystemSet(event){
                ynav.push('root:com/yx/user/systemSet.js')
            },

            //退出登录
            loginOut(event){
                if(!utils.lockEventDeferFree(event.e)) {
                    //清空存储sid
                    pref.setString('sid', '')
                    //设置重复跳转登录页面
                    ynav.push('root:com/yx/login/login.js',()=>{
                        var page = weex.requireModule("page")
                        page.reload()
                    })


                }
            },

            //加载更多数据
            loadDataMore() {
                this.from = this.from + 1
                this.loadData(this.from)
            },

            formatTime: function (time) {
                return dtl.formatDay(time)
            },

            //内容处理
            textContent(content) {
                if (content == undefined || content == null) {
                    return ''
                }
                content = decodeURIComponent(content)
                return content.length > 66 ? (content.substring(0, 60) + '.....') : content
            },

            //获取媒体地址
            vedioUrl(keyUrl) {
                var arr = keyUrl.split(',')
                return arr[1]
            },

            //刷新数据
            onrefresh(event) {
                this.from = 1
                this.loadData(this.from)
            },

            //加载数据
            loadData(from) {
                var self = this
                var repData = {}
                if (!from) {
                    repData.from = 1
                }else{
                    repData.from = from
                }
                repData.size = 10
                if (repData.from <= 1) {
                    self.refreshing = true
                } else {
                    self.loadinging = true
                }


                nw.postDefine('/app/yxq/user/dynamic', {
                    data: repData,
                    success(res) {
                        if (repData.from <= 1) {
                            self.dataList = res
                            self.refreshing = false
                        } else {
                            for (let i in res) {
                                self.dataList.push(res[i])
                            }
                            self.loadinging = false

                        }
                    }
                })
            },

            //跳转个人言论详情
            jumpSpeechDetail(event){
                ynav.pushParam('root:com/yx/speech/speechDetail.js',{id:event.target.attr.dataId})
            },

            imgTypesettingList(url){

                if (!url || url === '') {
                    return [];
                }

                var list = url.split(';')

                var arr = []
                var tempArr = []
                var nindex = 0
                // list = [1,2,3,4,5,6,7]
                for (let i = 0; i < list.length; i++) {
                    var url = {
                        url:list[i].split(',')[1],
                        thumb:list[i].split(',')[2],
                    }

                    if (i / 3 == nindex) {
                        tempArr = []
                        arr.push(tempArr)
                        nindex++
                    }
                    tempArr.push(url)

                }
                return arr
            },

            onLoad(){
                var self = this
                this.loadData(1)
                nw.postDefine('/app/system/user/info',{
                    success(res){
                        self.infoData = res
                    }
                })
            }
        },
        mounted() {
            if (weex.config.env.platform.toLowerCase() == 'android') {
                this.onLoad()
            }
        }
    }
</script>